<template>
	<view class="page">
		<view class="p-search align-center justify-center">
			<view class="p-search-inner align-center">
				<view class="p-search-l align-center">
					<image src="/static/m-search.png" mode="aspectFill" class="ic"></image>
					<input type="text" placeholder="按车牌号搜索" class="inpt" v-model="kw" confirm-type="search" @confirm="search">
				</view>
				<view class="p-search-r" @click="search">
					搜索
				</view>	
			</view>
		</view>
		<view class="p-list">
			<singleList ref="listRef" url="car.car_list" :sendData="reqData" @reqEnd="searchEnd">
				<template v-slot:items="{ list }">
					<empty v-if="sRes && sRes==='empty'" marginTop="200rpx"></empty>
					<block v-for="(item, i) in list" :key="i">
						<carItem :info="item" />
					 </block>
				</template>
			</singleList>
		</view>
		<safe-area height="84rpx" bgColor="#f7f7f7">
			<template v-slot:btn>
				<view class="p-btn" @click="navTo('/pages/car/carHandle/index')">
					上传车辆
				</view>
			</template>
		</safe-area>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref,
	nextTick,
	// watchEffect,
} from 'vue';
import carItem from './components/carItem.vue';
import { onLoad, onShow,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
const cars = defineComponent({
	components: {
		carItem
	},
	props: {},
	setup(props: any, ctx: any) {
		const data = reactive({
			store_id:'',
			reqData: {},
			sRes:'',
			kw:'',
		});
		const listRef = ref();
		onLoad(e => {
			// if(e.store_id){
			// 	data.store_id = e.store_id;
			// }
		});
		onShow(() => {
			nextTick(() => {
				// data.reqData = {
				// 	kw: ''
				// };
				listRef.value.getList(true);
			});
		});
		onPullDownRefresh(()=>{
			listRef.value.getList(true);
			uni.stopPullDownRefresh();
		})
		onReachBottom(()=>{
			listRef.value.getList();
		})
		const searchEnd =({loadingType,pageOneRes})=>{
			if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
				data.sRes='empty';
			}else{
				data.sRes=loadingType;
			}
		}
		const search = ()=>{
		    data.reqData = {
		    	keyword: data.kw,
		    };
		}
		return {
			...toRefs(data),
			listRef,
			searchEnd,
			search,
		};
	}
});
export default cars;
</script>


<style lang="scss">
page {
	background-color: #f7f7f7;
}
.page{
	padding-bottom: 30rpx;
}
.p-search{
	background: #FFFFFF;
	height: 126rpx;
	.p-search-inner{
		border-radius: 39rpx;
		width: 690rpx;
		background: #F6F6F6;
	}
	&-l{
		flex:1;
		height: 78rpx;
		padding: 0 20rpx;
		.ic{
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;
		}
		.inpt{
			flex: 1;
			height: 78rpx;
			line-height: 78rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
		}
	}
	&-r{
		text-align: center;
		height: 78rpx;
		line-height: 78rpx;
		font-size: 28rpx;
		color: $base-color;
		width: 100rpx;
	}
}
.p-list {
	margin-top: 24rpx;
	padding: 0 20rpx;
}
.p-btn{
	margin: 56rpx auto 0;
	width: 670rpx;
	height: 84rpx;
	background: #3E6FEF;
	border-radius: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	&.disabled{
		background-color: #eee;
	}
}
</style>
